<template>
	<view>
		<view class="p-3 flex align-center ">
			<image src="../../static/logo.png" mode="" class="rounded-circle flex-shrink mr-3" style="height: 120rpx;width: 120rpx;"></image>
			<view class="flex-1 ">
				<view class="flex flex-column text-muted">
					<view class="flex align-end">
						<text class="font-lg text-dark mr-2">{{user.nickname||user.username}}</text>
						{{user.sex}}
					</view>
					<text class="text-ellipsis">{{user.desc}}</text>
				</view>
				
			</view>
		</view>
		<view class="bg-light" style="height: 20rpx;" >
			
		</view>
		<view class="p-3">
			 <progress class="mb-3" :percent="progress" active="" stroke-width="3" show-info />
			<view class="flex align-center justify-between font">
				<text class="text-light-muted ">总 {{user.total_size | bytesToSize}}</text>
				<text class="text-warning">已用 {{user.used_size | bytesToSize}}</text>
			</view>
		</view>
		<view class="bg-light" style="height: 20rpx;" >
			
		</view>
		<uni-list-item @click="setting" title="其他设置"></uni-list-item>
	</view>
</template>

<script>
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue';
	import {mapState} from 'vuex';
	export default {
		components:{
			uniListItem
		},
		
		data() {
			return {
			}
		},
		filters: {
			bytesToSize(bytes) {
				if (bytes === 0) return '0 KB';
				var k = 1000, // or 1024
				sizes = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
				i = Math.floor(Math.log(bytes) / Math.log(k));
			   return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
			}
		},
		computed:{
			...mapState({
				user:state=>state.user
			}),
			progress(){
				if(this.user.total_size===0){
					return 0
				}
				return parseInt((this.user.used_size/this.user.total_size)*100)
			}
		},
		methods: {
			setting(){
				uni.navigateTo({
					url:'../setting/setting'
				})
			}
		},
		onShow() {
			this.$H.get('/getsize',{token:true}).then(res=>{
				this.$store.dispatch('updateSize',res)
			})
		}
	}
</script>

<style>

</style>
